<template>
<view v-if="!err" class="whe_maxv_view tck">
  <up-navbar
      title="订单详情"
      @leftClick="rightClick"
      :autoBack="false"
  >
  </up-navbar>
  <view class="boxs wz_black" style="padding: 110px 10px 20px">
    <view class="fz_14">
      <view v-if="orderDetail.order_status===0" class="xyy ba_white bor_10 pad_10 boxs">
        <view class="fz_20 em wh_f_r">
          <view class="centerdq" style="margin-right: 20px">待支付 剩余</view>
          <view class="djs centerdq">
            <up-count-down
                :time="orderDetail.last_time * 1000"
                format="mm:ss">
            </up-count-down>
          </view>
        </view>
        <view class="pad_10_0 fz_12 wz_hui">超过15分钟未支付, 订单将自动取消</view>
        <view class="wh_f wz_jz fz_12">
          <view @click="show = true" class="pad_10_0 bor_25" style="width: 100px;background-color: #d5f0dd;color: #3a9e5f">取消订单</view>
          <view @click="pay" class="flex_1 pad_10_0 bor_25 mag_l-10"
                style="background-color: #3a9e5f;color: white">立即支付 ¥ {{ orderDetail.pay_price }}</view>
        </view>
      </view>
      <view  v-if="orderDetail.order_status===1" class="xyy ba_white bor_10 pad_10 boxs">
        <view class="fz_20 em">已付款</view>
        <view class="pad_10_0">
          您已付款,请等待发货!
        </view>
      </view>
      <view  v-if="orderDetail.order_status===2" class="xyy ba_white bor_10 pad_10 boxs">
        <view class="fz_20 em">退款成功</view>
        <view class="pad_10_0">订单退款: 退回
          <text class="wz_red">¥{{ orderDetail.pay_price}}</text>
          现金
        </view>
      </view>
      <view  v-if="orderDetail.order_status===3" class="xyy ba_white bor_10 pad_10 boxs">
        <view class="fz_20 em">已发货</view>
        <view class="pad_10_0">您的订单已发货,请等待查收!</view>
      </view>
      <view  v-if="orderDetail.order_status===4" class="xyy ba_white bor_10 pad_10 boxs">
        <view class="fz_20 em">订单已完成</view>
        <view class="pad_10_0">感谢您对
          <text class="wz_lv">鲜到家族云享集市</text>
          的信任, 期待您再次光临!
        </view>
      </view>
      <view  v-if="orderDetail.order_status===6" class="xyy ba_white bor_10 pad_10 boxs">
        <view class="fz_20 em">已关闭</view>
        <view class="pad_10_0">
          您的订单已关闭!
        </view>
      </view>
      <view  v-if="orderDetail.order_status===7" class="xyy ba_white bor_10 pad_10 boxs">
        <view class="fz_20 em">部分退款</view>
        <view class="pad_10_0">部分商品有退款: 退回
          <text class="wz_red">¥3.99</text>
          现金
        </view>
      </view>
    </view>

    <view style="padding: 15px 10px">
      <img class="centerdq" v-if="orderDetail.get_type == 1" src="../../static/icon/ddzt.png" style="width: 24px;height: 24px" alt="">
      <img class="centerdq" v-if="orderDetail.get_type == 3" src="../../static/icon/typs.png" style="width: 24px;height: 24px" alt="">
      <text class="centerdq mag_l-10">{{ orderDetail.get_type_str }}</text>
    </view>
<!--    商品列表-->
    <view class=" ba_white xyy bor_10 box" style="padding: 15px 10px 5px">
      <view v-for="(item,index) in orderDetail.goods" :key="index" class="wh_f mag_b_10">
        <view class="pad_0_5 boxs" style="width: 100px">
          <view class="img_zfx">
            <img class="centerdq" :src="item.goods_image" alt="">
          </view>
        </view>
        <view class="flex_1 boxs" style="padding:0 10px">
          <view class="wh_f fz_16 em">
            <view class="flex_1">
              {{ item.goods_name }}
            </view>
            <view>
              ¥ {{ item.discount_price }}
            </view>
          </view>
          <view class="wh_f fz_14 wz_hui pad_5_0">
            <view class="flex_1">
              {{ item.goods.specs }}
            </view>
            <view v-if="false" class="scx">
              ¥ {{ item.discount_price }}
            </view>
          </view>
          <view class=" fz_14 wz_hui">
            x{{ item.goods_amount }}
          </view>
        </view>
      </view>
    </view>
<!--    费用明细-->
    <view class="xyy bor_10 box mag_t-20  ba_white" style="padding: 10px 10px 0">
      <view class="fz_18 em">费用明细</view>
      <view class="wh_f fz_14" style="padding: 15px 0 5px">
        <view class="flex_1 wz_hui">
          配送费
        </view><view class="em">¥ {{ orderDetail.delivery_fee }}</view>
      </view>
<!--      <view class="wh_f fz_14 pad_5_0">-->
<!--        <view class="flex_1 wz_hui">-->
<!--          <img class="centerdq" src="../../static/icon/gfyh.png" style="width: 14px;height: 14px" alt="">-->
<!--          <text class="centerdq mag_l-5">云享优惠</text>-->

<!--        </view><view class="em">云享{{ orderDetail.level }}级享{{ Number(orderDetail.discount)*10 }}折</view>-->
<!--      </view>-->
      <view class="wh_f fz_14 pad_5_0">
        <view class="flex_1 wz_hui">
          <img class="centerdq" src="../../static/icon/yhq.png" style="width: 14px;height: 14px" alt="">
          <text class="centerdq mag_l-5">优惠券</text>
        </view>
        <view class="">
          <text v-if="orderDetail.reward_logs">{{ orderDetail.reward_logs.name }}</text>
          <text v-if="!orderDetail.reward_logs">无</text>

        </view>
      </view>
      <view class="wh_f fz_14 pad_5_0" style="margin-bottom: 10px">
        <view class="flex_1 wz_hui">
          商品总价
        </view><view class="em">¥ {{ orderDetail.total_price }}</view>
      </view>
      <view v-if="false" class="wh_f fz_14" style="padding: 5px 0 0">
        <view class="flex_1 wz_hui">
          优惠总额
        </view>
        <view class="em wz_red">¥
        {{ orderDetail.discount_price }}
        </view>
      </view>
      <view style="border-top: 2px dashed #f0f2ee;padding-top: 15px">
        <view v-if="orderDetail.order_status===0" class="wh_f fz_14 pad_5_0">
          <view class="flex_1 wz_hui em fz_16 wz_rigdq wz_black">
            待付款
          </view>
        </view>
        <view v-if="orderDetail.order_status===1" class="wh_f fz_14 pad_5_0">
          <view class="flex_1 wz_hui">
            实付金额
          </view>
          <view class="em fz_20">¥ {{ orderDetail.pay_price }}</view>
        </view>
        <view v-if="orderDetail.order_status===2" class="wh_f fz_14 pad_5_0">
          <view class="flex_1 wz_hui">
            实付金额
          </view>
          <view class="em fz_20">
            <text class="wz_red fz_12 mag_r-10 xt">已退款</text>¥ {{ orderDetail.pay_price }}</view>
        </view>
        <view v-if="orderDetail.order_status===3" class="wh_f fz_14 pad_5_0">
          <view class="flex_1 wz_hui">
            实付金额
          </view>
          <view class="em fz_20">¥ {{ orderDetail.pay_price }}</view>
        </view>
        <view v-if="orderDetail.order_status===4" class="wh_f fz_14 pad_5_0">
          <view class="flex_1 wz_hui">
            实付金额
          </view>
          <view class="em fz_20">¥ {{ orderDetail.pay_price }}</view>
        </view>
        <view v-if="orderDetail.order_status===6" class="wh_f fz_14 pad_5_0">
          <view class="flex_1 wz_hui">
            订单已关闭
          </view>
        </view>
        <view v-if="orderDetail.order_status===7" class="wh_f fz_14 pad_5_0">
          <view class="flex_1 wz_hui">
            实付金额
          </view>
          <view class="em fz_20">
            <text class="wz_red fz_12 mag_r-10 xt">部分商品已退款</text>
            ¥ {{ orderDetail.pay_price }}</view>
        </view>
      </view>

    </view>

    <view v-if="orderDetail.fd_info" class="xyy bor_10 pad_10 box mag_t-20 ba_white">
      <view class="fz_18 em">福袋</view>
      <view class="wh_f fz_14 wz_hui" style="padding: 15px 0 5px">
        <view class="" style="padding-right: 20px">
          {{ orderDetail.fd_info?.name }}
        </view>
        <view class="flex_1 wz_hui">
          {{ orderDetail.fd_info?.reward?.remark }}
        </view>
      </view>
    </view>
    <!--    订单信息-->
    <view class="xyy bor_10 pad_10 box mag_t-20 ba_white">
      <view class="fz_18 em">订单信息</view>
      <view class="wh_f fz_14 wz_hui" style="padding: 15px 0 5px">
        <view class="flex_1">
          订单号码
        </view>
        <view class="em">
          {{ orderDetail.order_num }}
          <text @click="copy(orderDetail.order_num)" class="wz_black"> | 复制</text>
        </view>
      </view>
      <view class="wh_f fz_14 pad_5_0">
        <view class="flex_1 wz_hui">
          <text class="centerdq mag_l-5">取件方式</text>
        </view>
        <view class="">{{ orderDetail.get_type_str }}</view>
      </view>
      <view class="wh_f fz_14 pad_5_0">
        <view class="flex_1 wz_hui">
          <text class="centerdq mag_l-5">配送地址</text>
        </view>
        <view v-if="orderDetail.get_type == 3" class="hh wz_rigdq" style="width: 80%">
          {{ orderDetail.address?.name }}
          {{ orderDetail.address?.phone }}
          <br>
          {{ orderDetail.address?.address_all }}
        </view>
        <view v-if="orderDetail.get_type == 1" class="hh wz_rigdq" style="width: 80%">
          {{ orderDetail.stage_store?.name }}
          <br>
          {{ orderDetail.stage_store?.address }}
        </view>
      </view>
      <view class="wh_f fz_14 pad_5_0">
        <view class="flex_1 wz_hui">
          支付方式
        </view><view class="">线上支付</view>
      </view>
      <view class="wh_f fz_14 pad_5_0">
        <view class="flex_1 wz_hui">
          使用渠道
        </view><view class="">小程序</view>
      </view>

      <view class="wh_f fz_14 pad_5_0">
        <view class="flex_1 wz_hui">
          下单时间
        </view><view class="">{{ orderDetail.created_at }}</view>
      </view>
    </view>
  </view>
  <up-popup :safeAreaInsetBottom="false" customStyle="width:70%;border-radius: 20px" :show="show" mode="center">
    <view>
      <view style="padding: 15px">
        <view class="fz_16 em wz_jz"><text>确定取消订单?</text></view>
        <view class="fz_14 pad_10_0">
          <text>您的订单还未完成支付, 请在订单取消前尽快完成支付。</text>
        </view>

        <view class="split_2 pad_10_0 wz_jz">
          <view>
            <text class="bor_1_hui bor_20 fz_12 em" @click="show=false"
                  style="background-color: #d5f0dd;color: #3a9e5f;
                  padding: 7px 30px">取 消</text>
          </view>
          <view>
            <text class="bor_1_hui bor_20 fz_12 em"
                  @click="cancelOrder"
                  style="background-color: #3a9e5f;color:white;
                  padding: 7px 30px">确 定</text>
          </view>
        </view>
      </view>
    </view>
  </up-popup>
  <up-toast ref="uToastRef"></up-toast>
</view>
  <view v-if="err" class="whe_maxv_view wz_jz jz_flex">
    <view>
      <view class="pad_30_0">网络开小差了 , 请刷新一下页面试试吧</view>
      <view>
        <text @click="getDeta" class="bor_25 wz_white" style="background-color: #3a9e5f;padding:4px 30px">刷新</text>
      </view>
    </view>

  </view>
</template>
<script>
import {cancelOrder, getShopGoodsInfo, miniPay, orderDetail} from "../../Api/shop";

export default {
  name: "index",
  data(){
    return{
      orderDetail:{},
      order_id:'',
      show:false,
      orderNo:'',
      err:false
    }
  },
  onBackPress(){
    return true;
  },
  onUnload(){
    uni.reLaunch({
      url: '/porder/orderList/index'
    });
  },
  onLoad(options){
    // options.id
    this.order_id = options.id
    console.log("传递",options)
    if(options.id){
      orderDetail({
        order_id:options.id
      }).then(res=>{
        this.orderDetail = res.data
        console.log('订单详情1',res)
      })
    }else if(options.orderNo){
      this.orderNo = options.orderNo
      orderDetail({
        orderNo:options.orderNo
      }).then(res=>{
        if(res.success){
          this.err = false
          this.orderDetail = res.data
        }else{
          this.err = true
        }
        console.log('订单详情2',res)
      }).catch(err=>{
        console.log("出错啦!")
      })

    }

  },
  methods:{
    getDeta(){
      orderDetail({
        orderNo:this.orderNo
      }).then(res=>{
        if(res.success){
          this.err = false
          this.orderDetail = res.data
        }else{
          this.err = true
        }
      }).catch(err=>{
        console.log("出错啦!")
      })
    },
    copy(value){
      uni.setClipboardData({
        data: value,
        success: function () {
        // 复制成功后的回调函数
          uni.showToast({
            title: '复制成功'
          });
        }
      });
    },
    rightClick(){
      uni.reLaunch({
        url: '/porder/orderList/index'
      });
    },
    pay() {
      let tthis = this
      miniPay({
        order_id: this.order_id,
        type: 2
      }).then(res => {
        let data = res.data
        console.log(res)
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: data.signType,
          paySign: data.paySign,
          delivery_type:1,
          _debug: 1,
          success: (res) => {
            console.log('支付结果',res)
            setTimeout(()=>{
              tthis.showToast('支付成功!')
            },1500)
            tthis.getList()
            // this.$refs.uToast.show({
            //   message: '支付成功',
            //   type: 'success',
            //   complete() {
            //     uni.redirectTo({
            //       url: '../skittles/My_order'
            //     })
            //     this.getList()
            //   }
            // })
          },
          fail: (error) => {
            uni.showToast({
              icon: 'none',
              title: '支付失败'
            })

          }
        })
      })
    },
    //消息提示
    showToast(msg, type = "default") {
      uni.showToast({
        title: msg,
        icon: "none", // 图标类型，可选值：success, none
        duration: 2000 // 显示时间，单位毫秒
      });
    },
    getList(){
      orderDetail({
        order_id:this.order_id
      }).then(res=>{
        this.orderDetail = res.data
        console.log('订单详情',res)
      })
    },
    // 取消订单
    cancelOrder(){
      cancelOrder({
        order_id:this.order_id
      }).then(res=>{
        this.show = false
        this.getList()
      })
    }

  }
}
</script>
<style lang="scss">

.tck{
  ::v-deep.u-popup__content{
    width: 70%!important;
    border-radius: 10px;
    padding: 15px;
    box-sizing: border-box;
  }
}
.djs{
  ::v-deep.u-count-down{
    color: #ff9a2e!important;
  }
  ::v-deep.u-count-down__text{
    color: #ff9a2e!important;
  }
}

</style>
